<template>
  <div class="communityBox">
    <header>
      <ul>
        <li @click="goback"><i class="iconfont icon-zuojiantou"></i></li>
        <li>
          <van-search v-model="value" placeholder="搜索" background="inherit" />
        </li>
        <li><i class="iconfont icon-liaotian"></i></li>
      </ul>
    </header>
    <div class="nav">
      <van-tabs v-model:active="activeName">
        <van-tab title="全部" name="total"></van-tab>
        <van-tab title="好物测评" name="evaluation" class="currentIndex">
        </van-tab>
        <van-tab title="生活技能" name="skill"></van-tab>
        <van-tab title="闲话家常" name="gossip"></van-tab>
      </van-tabs>
    </div>
    <div class="main">
      <ul>
        <li v-for="(item, index) in dataList.evaluation" :key="index">
          <div class="microphone">
            <i class="iconfont icon-_maikefeng"></i>
          </div>
          <h2> {{item.title}} </h2>
          <p> {{item.quote}} </p>
          <div class="discuss">
            <ul>
              <li>
                <img src="https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto" alt="">
              </li>
              <li>
                <img src="https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto" alt="">
              </li>
              <li>
                <img src="https://img2.baidu.com/it/u=304846655,1860504905&fm=26&fmt=auto" alt="">
              </li>
              <li>
                <i class="iconfont icon-shenglvehao"></i>
              </li>
              <li> {{item.num}}人参加讨论</li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      activeName: "evaluation",
      dataList: {
        evaluation: [
          {
            title: "关于冰箱，你有什么要吐槽的",
            quote:
              "你对你家冰箱有什么不满:不够好看、容量太小或太大、制冷效果不好、总有异味，还是......？",
            num: "1401",
          },
          {
            title: "清洁用品推荐大会",
            quote:
              "你用过哪些好用的清洁用品？快推荐给住友们吧.记得附上推荐理由哦~",
            num: "1401",
          }
        ],
      },
    };
  },
  methods: {
    goback() {
        this.$router.push('/home')
    }
  }
};
</script>

<style scoped lang='less'>
header {
  background-color: #ff5654;
  ul {
    display: flex;
    li {
      line-height: 88px;
      color: #fff;
      i {
        font-size: 36px;
        color: #fff;
      }
      &:nth-child(1),
      &:nth-child(3) {
        margin-left: 20px;
      }
      .van-search {
        width: 600px;
        padding: 0;
        margin-top: 15px;
        margin-left: 15px;
      }
    }
  }
}
.nav {
        box-shadow: 0px 0px 20px #ccc;
}
.main {
  margin-top: 34px;
  ul {
    li {
      box-sizing: border-box;
      width: 670px;
      height: 420px;
      box-shadow: 0px 0px 20px #ccc;
      margin: 0 auto;
      padding: 0 74px;
      margin-bottom: 64px;
      .microphone {
        text-align: center;
        padding: 78px 243px 56px;
        i {
          font-size: 48px;
          color: rgba(0,0,0,0.8);
        }
      }
      h2 {
        font-size: 24px;
        text-align: center;
      }
      p {
        font-size: 20px;
        text-align: center;
      }
      .discuss {
        ul {
          overflow: hidden;
          margin-left: 120px;
          li {
            float: left;
            padding: 0;
            box-shadow: 0 0 0 0;
            margin-bottom: 0;
            // margin-top: 56px;
            position: relative;
            &:nth-child(n-2) {
              width: 40px;
              height: 40px;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 40px;
                height: 40px;
              }
            }
            &:nth-child(2){
              margin-right: -5px;
            }
            &:nth-child(3){
              margin-right: -10px;
            }
            &:nth-child(4){
              i {
                text-align: center;
                line-height: 40px;
                font-size: 40px;
                color: #bfbab9;
                position: absolute;
                right: 5px;
                z-index: -2;
              }
            }
            &:nth-child(5) {
              font-size: 20px;
              margin-left: 15px;
              width: 180px;
              line-height: 40px;
            }
          }
        }
      }
    }
  }
}
</style>